<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('在线用户列表')" />
	<style type="text/css">
		label.layui-form-label {width: 95px;padding-right: 0px;}
	</style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="main-content">
		<form>
			<th:block th:include="listinclude :: searchTop" />
		</form>
	</div>
	<div class="mid-content">
		<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
	</div>
</div>
<script type="text/html" id="barDh">
	<a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-sign-out" lay-event="forceLogout" shiro:hasPermission="system:online:batchForceLogout"><span class="fa_span">强退</span></a>
</script>
<script type="text/html" id="toolbar1">
	<div class="layui-btn-container">
		<div class="layui-btn layui-btn-sm layui-btn-danger layui-table-tools" lay-event="batchForceLogout" shiro:hasPermission="system:online:forceLogout">
			<p class=" dhicon dh-lujing1156" style="color:white;font-size:14px"><span class="fa_span">强退</span></p>
		</div>
	</div>
</script>
<script type="text/html" id="userStatus">
	<input type="checkbox" lay-skin="switch" lay-text="在线|离线" {{ d.status===('on_line') ? 'checked' : '' }} disabled="disabled">
</script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: motif-alone" />
<script type="text/javascript">
	var $,layer,form,table,wherestr={};
	layui.use(['table','form','layer','jquery'], function () {
		$ = layui.$,layer = layui.layer,form = layui.form,table = layui.table;
		$.tablelist.init({
			elem: '#dhtable'
			,url: '/system/online/list'
			,initSort: {field: 'startTimestamp',type: 'desc'}
			,where: {
				field: 'startTimestamp' //排序字段
				,order: 'desc' //排序方式
			}
			,cols: [[
				{checkbox: true},
				{type:'numbers',title:''},
				{field: 'sessionId',title: '会话编号'},
				{field: 'loginName',title: '登录用户',sort: true},
				{field: 'userName',title: '用户姓名',sort: true},
				{field: 'deptName',title: '部门名称',sort: true},
				{field: 'ipAddr',title: '登录地址'},
				{field: 'loginLocation',title: '登录地点'},
				{field: 'browser',title: '浏览器',sort: true},
				{field: 'os',title: '操作系统',sort: true},
				{field: 'status',title: '会话状态',align: 'center',templet:'#userStatus'},
				{field: 'startTimestamp',title: '登录时间',sort: true,width:155},
				{field: 'lastAccessTime',title: '最后访问时间',sort: true,width:155},
				{title: '操作',align: 'center',templet:'#barDh'}
			]
			]
			,toolbar: '#toolbar1'
			,height:'full-90'
		});
		//监听表格工具条
		table.on('tool(ftable)', function (obj) {
			var data = obj.data;
			if(obj.event === 'forceLogout'){ //单条强退
				$.modal.confirmCom('确定要强制选中用户下线吗？',function(){
					$.operate.post('/system/online/forceLogout',{'sessionId':data.sessionId},function(res){
						active['reload'].call(this);
					});
				});
			};
		});
		//监听头部工具条
		table.on('toolbar(ftable)', function(obj){
			if(obj.event === 'batchForceLogout'){//批量强退
				var rows = $.tablelist.getCheckData("dhtable");
				if (rows.length == 0 || rows == "[]") {
					$.modal.alertWarning("请选择要强退的用户");
					return;
				}
				$.modal.confirmCom("确认要强退选中的" + rows.length + "条数据吗?", function() {
					var url = "/system/online/batchForceLogout";
					var ids=[];
					for (var i = 0; i < rows.length; i++) {
						ids[i] = rows[i]['sessionId'];
					};
					var data = { "ids": ids};
					$.operate.post(url, data,function(res){
						active['reload'].call(this);
					});
				});
			};
		});
		//表单重载方法
		var active = {
			reload: function (formData) {
				$.each(wherestr,function(i,v){$("#"+i).val()?wherestr[i]=$("#"+i).val():wherestr[i]='';});//动态获取条件的值
				table.reload('dhtable', {page: {curr: 1},where:wherestr});
			},
		};
		//搜索按钮
		$('#btn-search').on('click', function () {
			$.each(wherestr,function(i,v){$("#"+i).val()?wherestr[i]=$("#"+i).val():wherestr[i]='';});//动态获取条件的值
			table.reload('dhtable', {page: {curr: 1},where:wherestr});
		});
		//监听下拉框——添加条件
		form.on('select(fft)', function(obj){
			addMore(this);
		});
	});
</script>
</body>
</html>